<template>
    <div class="activityBlock">
        <div class="in-flow-wrap" v-if="!inShow" :style="!inShow ? 'height=0' : ''">
            <el-tooltip class="item in-headleft" effect="dark" content="admin" placement="top">
                <div class="in">in</div>
            </el-tooltip>
            <div class="in-flow" @click="showflow = false" v-if="showflow">写跟进...</div>
            <div class="in-con-wrap" v-if="!showflow">
                <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="跟进内容" prop="flowCon" class="item-form">
                        <el-input type="textarea" v-model="ruleForm.flowCon" placeholder="输入@可选择需通知人员"></el-input>
                        <div class="common-use">
                            <el-dropdown trigger="click" class="more">
                                <el-button class="el-button--transparent">常用语</el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>电话无人接听</el-dropdown-item>
                                    <el-dropdown-item>客户无意向</el-dropdown-item>
                                    <el-dropdown-item><span class="other"><i
                                                class="el-icon-s-tools"></i>管理</span></el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-form-item>

                    <div class="form-flex">
                        <el-form-item label="下次联系时间" prop="desc" style="width:50%" class="item-form">
                            <el-date-picker style="width:100%" v-model="ruleForm.nextTime" type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="跟进方式" prop="" style="width:50%" class="item-form">
                            <el-select v-model="ruleForm.flowMethod" placeholder="请选择活动区域" style="width:100%">
                                <el-option label="打电话" value="shanghai"></el-option>
                                <el-option label="发邮件" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="upload-wrap">
                        <el-tooltip class="item" effect="dark" content="图片" placement="top">
                            <i class="el-icon-picture mr20"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="附件" placement="top">
                            <i class="el-icon-folder-opened mr20"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="相关信息" placement="top">
                            <i class="el-icon-document-copy mr20"></i>
                        </el-tooltip>
                    </div>
                    <div class="submit-btn">
                        <el-button type="primary">发布</el-button>
                        <el-button @click="cancelForm">取消</el-button>
                    </div>
                </el-form>
            </div>
        </div>

        <div class="log-wrap" :style="inShow ? 'margin-top:0 !important;' : ''">
            <div class="show-tab-wrap">
                <div>
                    <span>显示：</span>
                    <el-button class="tag-btn" :class="activeOption == 'flowRecord' ? 'el-button--selected' : ''"
                        @click="logInfo('flowRecord')">跟进记录</el-button>
                    <el-button class="tag-btn" :class="activeOption == 'customDynamics' ? 'el-button--selected' : ''"
                        @click="logInfo('customDynamics')">客户动态</el-button>
                </div>
                <el-button class="tag-btn"> <svg-icon icon-class="filter" class="filters" />
                </el-button>

            </div>

            <div class="tab-con-wrap">
                <div class="group-left">
                    <div class="day">12</div>
                    <div class="year-mon">2023.06</div>
                </div>
                <div class="group-right-wrap" v-if="activeOption == 'flowRecord'">
                    <div class="group-item-wrap">
                        <div class="top-head">
                            <div class="in">in</div>
                            <div>
                                <div>
                                    <span class="name">admin</span>
                                    <el-tag effect="light" style="margin-left:16px">
                                        客户跟进记录
                                    </el-tag>
                                    <el-tag effect="light" type="info" style="margin-left:8px">
                                        打电话
                                    </el-tag>
                                </div>
                                <div class="create-time">2023-06-12 18:16:39</div>
                            </div>
                            <el-dropdown trigger="click" class="edit-record">
                                <el-button class="el-button--transparent"><i class="el-icon-more"></i></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>编辑</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>

                        <div class="flow-con mt8">这是跟进记录内容</div>
                        <div class="flow-other mt8">
                            <i class="el-icon-alarm-clock"></i>
                            <div class="other-con">下次联系时间：2023-06-13 18:26:46</div>
                        </div>
                        <div class="flow-other mt8 pointer" @click="commentFlg = !commentFlg">
                            <i class="el-icon-chat-dot-round"></i>
                            <div class="other-con">评论</div>
                        </div>
                        <div class="comment-block" v-if="commentFlg">
                            <el-tooltip class="item" effect="dark" content="admin" placement="top">
                                <div class="in">in</div>
                            </el-tooltip>
                            <div class="in-comment">请输入评论内容</div>
                        </div>
                    </div>
                </div>
                <div class="group-right-wrap" v-if="activeOption == 'customDynamics'">
                    <div class="group-item-wrap">
                        <div class="top-head">
                            <div class="in">in</div>
                            <div>
                                <div>
                                    <span class="name">admin</span>
                                    <span class="dec-txt">创建了联系人</span>
                                </div>
                                <div class="create-time">2023-06-12 18:16:39</div>
                            </div>
                        </div>
                        <div class="group-info">
                            <div class="item-info">
                                <span>联系人名称：</span>
                                <div class="other">安娜</div>
                            </div>
                            <div class="item-info">
                                <span>职务：</span>
                                <div>支援</div>
                            </div>
                            <div class="item-info">
                                <span>手机：</span>
                                <div>13726384950</div>
                            </div>
                        </div>
                    </div>

                    <div class="group-item-wrap">
                        <div class="top-head">
                            <div class="in">in</div>
                            <div>
                                <div>
                                    <span class="name">admin</span>
                                    <span class="dec-txt">创建了联系人</span>
                                </div>
                                <div class="create-time">2023-06-12 15:16:39</div>
                            </div>
                        </div>
                        <div class="group-info">
                            <div class="item-info">
                                <span>客户名称：</span>
                                <div class="other">安娜</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nomore">没有更多了</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'activityBlock',
    props: ["inShow"],
    data() {
        return {
            activeOption: 'flowRecord',
            showflow: true,
            rules: {
                flowCon: [
                    { required: true, message: '请输入跟进内容', trigger: 'change' }
                ],
            },
            ruleForm: {},
            commentFlg: false,
        }
    },
    methods: {
        logInfo(type) {
            this.activeOption = type
        },
        cancelForm() {
            this.showflow = true;
        },
        // 控制跟进的显隐
        // inUnShow() {
        //     console.log(inShow)
        //     if(!this.inShow){
        //         this.showflow = false
        //     }

        // }
    },
    created() {
        // this.inUnShow()
    }
}
</script>
<style lang="scss" scoped>
.activityBlock {

    .in {
        height: 32px;
        width: 32px;
        line-height: 32px;
        font-size: 14px;
        background: rgb(0, 82, 204);
        border-radius: 50%;
        text-align: center;
        color: #fff;
        margin-right: 8px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mt8 {
        margin-top: 8px;
    }

    .mr20 {
        margin-right: 20px;
    }

    .other {
        color: #0052cc !important;
        cursor: pointer;
    }

    .in-flow-wrap {
        display: flex;

        // align-items: center;
        .in-flow {
            flex: 1 1 0%;
            border: 2px solid #dfe1e6;
            border-radius: 3px;
            position: relative;
            padding: 0 24px;
            line-height: 40px;
            color: #7a869a;
            cursor: text;
            font-weight: 500;
        }

        .in-con-wrap {
            position: relative;
            padding: 8px 16px 24px;
            border: 2px solid #dfe1e6;
            border-radius: 3px;
            width: 100%;

            .form-flex {
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                display: flex;

                .item-form {
                    padding: 12px 12px 0;
                    margin-bottom: 0;
                    // .el-form-item__label{
                    //     padding-bottom: 4px!important;
                    //     line-height: 1.5!important;
                    //     word-break: break-all!important;
                    //     word-wrap: break-word!important;
                    // }
                }
            }

            .common-use {
                text-align: right;
            }

            .upload-wrap {
                display: flex;
                align-items: center;
                margin-top: 16px;
                padding-left: 12px;
            }

            .submit-btn {
                padding-left: 12px;
                margin-top: 16px;
            }
        }
    }

    .log-wrap {
        position: relative;
        margin-top: 40px;

        .show-tab-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
        }

        .tag-btn {
            padding: 4px 6px !important;
            font-size: 14px !important;
            border-radius: 3px !important;
        }

        .nomore {
            color: #6b778c;
            text-align: center;
        }

        .tab-con-wrap {
            display: flex;
            margin-top: 15px;
            align-items: stretch;

            .group-left {
                width: 70px;
                padding-top: 15px;
                margin-right: 15px;
                text-align: center;

                .day {
                    font-size: 24px;
                }

                .year-mon {
                    margin-top: 5px;
                    font-size: 14px;
                }
            }

            .group-right-wrap {
                margin-left: 8px;
                flex: 1;

                .group-item-wrap {
                    position: relative;
                    padding: 12px 0 8px 16px;
                    background-color: #fff;
                }

                .top-head {
                    display: flex;
                    align-items: stretch;

                    .create-time {
                        margin-top: 2px;
                        color: #6b778c;
                    }

                    .dec-txt {
                        margin-left: 8px;
                        color: #42526e;
                    }

                    .name {
                        color: #172b4d;
                    }

                    .edit-record {
                        position: absolute;
                        top: 12px;
                        right: 0;
                    }
                }

                .group-info {
                    margin-top: 8px;
                    margin-left: 40px;

                    .item-info {
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        margin-bottom: 3px;
                        line-height: 1.5;
                        color: #6b778c;
                    }
                }

                .flow-con {
                    line-height: 18px;
                    letter-spacing: .5px;
                    word-wrap: break-word;
                    white-space: pre-wrap;
                    color: #172b4d;
                    margin-left: 40px;
                }

                .flow-other {
                    display: flex;
                    align-items: center;
                    margin-left: 40px;

                    .other-con {
                        margin-left: 40px;
                        color: #42526e;
                        margin-left: 8px;
                    }
                }

                .comment-block {
                    padding: 20px 20px 10px;
                    border: 1px solid #dfe1e6;
                    border-radius: 3px;
                    margin-left: 40px;
                    margin-top: 8px;
                    display: flex;

                    .in-comment {
                        width: 100%;
                        padding: 9px 8px;
                        font-size: 13px;
                        color: #c0c4cc;
                        cursor: pointer;
                        background-color: #fff;
                        border-radius: 3px;
                        border: 1px solid #dfe1e6;
                    }
                }
            }
        }
    }
}</style>
<style lang="scss">.item-form {
    padding: 12px 12px 0;
    margin-bottom: 0;

    .el-form-item__label {
        padding-bottom: 4px !important;
        line-height: 1.5 !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }
}

.el-tag.el-tag--info {
    background-color: #e8eaed;
    color: #172b4d;
}</style>